<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>统计</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="../static/css/animate.min.css" th:href="@{/css/animate.min.css}" rel="stylesheet"/>
    <link href="../static/css/style.min.css" th:href="@{/css/style.min.css}" rel="stylesheet"/>
</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content">

        <div class="row">
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-primary pull-right">本月</span>
                        <h5>收入</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins" th:text="${#strings.concat(thisMonthIncome, '元')}">0</h1>
                        <small>总收入</small>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-primary pull-right">本月</span>
                        <h5>订单</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins" th:text="${thisMonthOrderNum}">0</h1>
                        <small>新订单</small>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-primary pull-right">本月</span>
                        <h5>客户</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins" th:text="${thisMonthCustNum}">0</h1>
                        <small>新客户</small>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-primary pull-right">本月</span>
                        <h5>车辆</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins" th:text="${thisMonthCarNum}">0</h1>
                        <small>新增车辆</small>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>本月总收入</h5>
                        <div class="pull-right">
                            <div class="btn-group">
                                <button type="button" class="btn btn-xs btn-white active">天</button>
<!--                                <button type="button" class="btn btn-xs btn-white">月</button>-->
<!--                                <button type="button" class="btn btn-xs btn-white">年</button>-->
                            </div>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="row">
                            <div class="col-sm-9">
                                <div class="flot-chart">
                                    <div class="flot-chart-content" id="flot-dashboard-chart"></div>
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <ul class="stat-list">
                                    <li>
                                        <h2 class="no-margins" th:text="${#strings.concat(allIncome, '元')}">2,346元</h2>
                                        <small>总收入</small>
                                    </li>
                                    <li>
                                        <h2 class="no-margins " th:text="${#strings.concat(thisMonthIncome, '元')}">4,422元</h2>
                                        <small>最近一个月收入</small>
                                    </li>
                                 </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
      </div>
    </div>
    <script th:src="@{/js/jquery.min.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
    <script th:src="@{/ajax/libs/flot/jquery.flot.js}"></script>
    
    <th:block th:include="include :: sparkline-js" />
    <script th:inline="javascript">
	    $(document).ready(function () {
	        let listInfo = [[${monthIncomeInfo}]];
	        let jsonInfo = JSON.parse(listInfo);

            let income_data = [];
            let item;
            for (item in jsonInfo) {
                income_data.push([gt(jsonInfo[item]['dateStr']), jsonInfo[item]['income']])
            }

	        var dataset = [
	            {
	                label: "收入",
	                data: income_data,
	                color: "#1ab394",
	                bars: {
	                    show: true,
	                    align: "center",
	                    barWidth: 24 * 60 * 60 * 600,
	                    lineWidth: 0
	                }
	
	            },
	        ];
	
	
	        var options = {
	            xaxis: {
	                mode: "time",
	                tickSize: [2, "day"],
	                tickLength: 0,
	                axisLabel: "Date",
	                axisLabelUseCanvas: true,
	                axisLabelFontSizePixels: 12,
	                axisLabelFontFamily: 'Arial',
	                axisLabelPadding: 10,
	                color: "#838383"
	            },
	            yaxes: [{
	                    position: "left",
	                    max: 1070,
	                    color: "#838383",
	                    axisLabelUseCanvas: true,
	                    axisLabelFontSizePixels: 12,
	                    axisLabelFontFamily: 'Arial',
	                    axisLabelPadding: 3
	            }, {
	                    position: "right",
	                    clolor: "#838383",
	                    axisLabelUseCanvas: true,
	                    axisLabelFontSizePixels: 12,
	                    axisLabelFontFamily: ' Arial',
	                    axisLabelPadding: 67
	            }
	            ],
	            legend: {
	                noColumns: 1,
	                labelBoxBorderColor: "#000000",
	                position: "nw"
	            },
	            grid: {
	                hoverable: false,
	                borderWidth: 0,
	                color: '#838383'
	            }
	        };
	

            function gt(date_str) {
                // 时间字符串转时间
                return new Date(date_str.replace(/-/,"/")).getTime();
            }
	
	        var previousPoint = null,
	            previousLabel = null;
	
	        $.plot($("#flot-dashboard-chart"), dataset, options);
	    });
    </script>
</body>
</html>
